<style lang="less">
  .ue-resource {
    .el-cascader, .el-select {
      width: 100%;
    }
  }
</style>

<template>
  <section class="ue-resource">
    <ue-search-bar ref="ueSearchBar" v-model="searchCondition" :data="querys" label-width="100px">
    </ue-search-bar>
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-button type="primary" style="float: right" @click="resetSearch">重置</el-button>
      <el-button type="primary" style="float: right" @click="handleSearch">查询</el-button>
    </el-col>
    <el-table :data="tableData" highlight-current-row border max-height="670"
              @selection-change="selsChange" v-loading="listLoading" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="130">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="130">
      </el-table-column>
      <el-table-column prop="ignoreMemberUserName" label="忽略货主" width="130">
      </el-table-column>
      <el-table-column label="角色名称列表">
        <template slot-scope="scope">
         <label v-if="scope.row.roleNames != null"> {{scope.row.roleNames.join(',')}}</label>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="primary"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="primary"  @click="handleResetPwd(scope.$index, scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>

    <el-dialog :title="dialogTitle" size="tiny" :visible.sync="myFormVisible" :close-on-click-modal="false">
      <el-form :model="myForm" label-width="80px" ref="myForm">
        <el-form-item label="用户名"
                      :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' },
                                     { max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' }]"
                      prop="userName">
          <el-input v-model="myForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码"
                      :rules="[{ required: true, message: '请输入11位手机号码', trigger: 'blur' },
                                     { min: 11,max: 11, message: '请输入11位手机号码', trigger: 'blur' }]"
                      prop="phone">
          <el-input v-model="myForm.phone" type="number"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"
                      :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' },
                                     { max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' }]"
                      prop="email">
          <el-input v-model="myForm.email"></el-input>
        </el-form-item>
        <el-form-item label="忽略货主"
                      prop="ignoreMemberUserName">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入订单不显示的货主账户"
            v-model="myForm.ignoreMemberUserName"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="myFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="handleSubmit">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {searchUsers, saveUser, deleteUsers, modifyUser, resetPwd} from '../../api/organization/user';
export default {
  data () {
    return {
      searchCondition: {},
      props: {
        value: 'id',
        label: 'name'
      },
      myForm: {
        id: null,
        userName: null,
        phone: null,
        email: null,
        ignoreMemberUserName: null
      },
      dialogTitle: '',
      myFormVisible: false,
      sels: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      tableData: [],
      listLoading: false
    };
  },
  watch: {
    pids (val) {
      if (val.length > 0) {
        this.myForm.parent.id = val[val.length - 1];
      } else {
        this.myForm.parent.id = null;
      }
    }
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#default'] || [];
    }
  },
  methods: {
    handleResetPwd (index, row) {
      this.$confirm('您确认重置该用户密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPwd(row.id).then(res => {
          if (res.status === 200) {
            this.$message.success('重置密码成功');
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      });
    },
    handleSearch () {
      this.getTableData(this.$ue.objToFilter(this.searchCondition));
    },
    resetSearch () {
      this.$refs.ueSearchBar.reset();
    },
    handleEdit (index, row) {
      this.resetForm();
      this.myForm.userName = row.userName;
      this.myForm.phone = row.phone;
      this.myForm.email = row.email;
      this.myForm.id = row.id;
      this.myForm.ignoreMemberUserName = row.ignoreMemberUserName;
      this.dialogTitle = '修改';
      this.myFormVisible = true;
    },
    handleAdd () {
      this.resetForm();
      this.myForm.id = null;
      this.dialogTitle = '添加';
      this.myFormVisible = true;
    },
    batchRemove () {
      this.$confirm('您确认删除这些用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = this.sels.map(item => item.id);
        deleteUsers(ids).then(res => {
          if (res.data.successFlg) {
            this.handleSearch();
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      });
    },
    handleSubmit () {
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          if (this.myForm.id != null) {
            modifyUser(this.myForm).then(res => {
              if (res.status === 201) {
                this.myFormVisible = false;
                this.handleSearch();
              } else {
                this.$message.error(res.data.errorMsg);
              }
            });
          } else {
            saveUser(this.myForm).then(res => {
              if (res.status === 201) {
                this.myFormVisible = false;
                this.handleSearch();
              } else {
                this.$message.error(res.data.errorMsg);
              }
            });
          }
        }
      });
    },
    selsChange (sels) {
      this.sels = sels;
    },
    handlePageSizeChange (val) {
      this.pageSize = val;
      this.handleSearch();
    },
    handleCurrentPageChange (val) {
      this.currentPage = val;
      this.handleSearch();
    },
    resetForm () {
      if (this.$refs['myForm']) {
        this.$refs['myForm'].resetFields();
      }
      for (let p in this.myForm) {
        this.myForm[p] = null;
      }
    },
    getTableData (filters = '') {
      searchUsers({
        filters: filters,
        sort: 'createdDate,desc',
        page: this.currentPage - 1,
        size: this.pageSize
      }).then(res => {
        if (res.status === 200) {
          debugger;
          this.tableData = res.data;
          this.total = Number(res.headers['x-total-count']);
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    }
  },
  mounted () {
    this.getTableData();
  }
};
</script>
